<template>
    <div class="spgl">
        <div class="title">
            管理商品
            <div class="backPath" @click="backPath">
                <i class="el-icon-arrow-left"></i>
                返回商家中心
            </div>
        </div>
        <div class="content">
            <div class="tabs">
                <div
                    class="tab"
                    :class="{ 'tab-avatat': selectStatus == '' }"
                    @click="clickStatus('')"
                >
                    全部
                </div>
                <div
                    class="tab"
                    :class="{ 'tab-avatat': selectStatus == '1' }"
                    @click="clickStatus('1')"
                >
                    售卖中
                </div>
                <div
                    class="tab"
                    :class="{ 'tab-avatat': selectStatus == '2' }"
                    @click="clickStatus('2')"
                >
                    已下架
                </div>
            </div>
            <div class="search flex-center-1">
                <el-input
                    v-model="input"
                    class="search-input"
                    placeholder="请输入内容"
                ></el-input>
                <el-button
                    class="search-submit"
                    type="warning"
                    @click="getSearchShopList"
                    >搜索</el-button
                >
            </div>

            <el-table class="table" :data="tableData" stripe>
                <el-table-column label="订单详情" width="330">
                    <template slot-scope="scope">
                        <div class="flex scope-log-div">
                            <img
                                :src="scope.row.pic[0]"
                                class="table-logo"
                                alt=""
                            />
                            <span class="table-name">
                                {{ scope.row.name }}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="金额" width="140">
                    <template slot-scope="scope">
                        <div class="money">
                            <span v-if="scope.row.price == 0">面议</span>
                            <span v-else>￥{{ scope.row.price }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="总销量" width="140">
                    <template slot-scope="scope">
                        <div class="zxl">
                            {{ scope.row.sale }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品状态" width="140">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 1" class="drop">
                            售卖中
                        </div>
                        <div v-if="scope.row.status == 2" class="drop2">
                            已下架
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="cz">
                            <div
                                v-if="scope.row.status == 1"
                                @click="clone(scope.row)"
                            >
                                复制商品链接
                            </div>
                            <div
                                v-if="scope.row.status == 1"
                                @click="edit(scope.row)"
                            >
                                编辑
                            </div>
                            <div
                                v-if="scope.row.status == 2"
                                @click="delShop(scope.row)"
                            >
                                删除
                            </div>
                            <div @click="shopStatus(scope.row)">
                                {{ scope.row.status == 1 ? "下架" : "上架" }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="10"
                    :current-page.sync="page"
                    @current-change="changePage"
                >
                </el-pagination>
            </div>
        </div>
        <div class="copycode" id="copycode">{{ cloneText }}</div>
    </div>
</template>

<script>
import { shop_manager_list, shopStatus, shop_del } from "@/assets/api/service";
export default {
    name: "GoodsManage",
    components: {},
    data() {
        return {
            selectStatus: "",
            tableData: [],
            input: "",
            total: 0,
            page: 1,
            cloneText: "",
        };
    },
    beforeDestroy() {},
    beforeMount() {},
    mounted() {
        this.getSearchShopList();
    },
    computed: {},
    watch: {},
    methods: {
        //删除商品
        async delShop(item) {
            var _this = this;
            this.$confirm("是否确认删除此商品？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    return shop_del({ id: item.id });
                })
                .then((data) => {
                    _this.$message({
                        showClose: true,
                        message: "删除成功",
                        type: "success",
                    });
                    this.getSearchShopList();
                })
                .catch(function (err) {});
            // const res = await shop_del({id: item.id})
            // if (res.code == 1) {
            //     this.$message.success('删除成功')
            //     this.getSearchShopList()
            // }
        },

        async getSearchShopList() {
            let params = {
                page: this.page,
            };
            if (this.selectStatus) params.status = this.selectStatus;
            if (this.input) params.name = this.input;
            let res = await shop_manager_list(params);
            if (res.code) {
                for (let item of res.data) item.pic = item.pic.split(",");
                this.tableData = res.data;
                if (res.data.length > 0) this.total = res.data[0].allcount;
                else this.total = 0;
            }
        },

        changePage(page) {
            this.page = page;
            this.getSearchShopList();
        },

        clickStatus(status) {
            this.selectStatus = status;
            this.getSearchShopList();
        },

        edit(item) {
            this.$router.push({
                path: "/service/productrelease",
                query: {
                    id: item.id,
                },
            });
        },

        async shopStatus(item) {
            const res = await shopStatus({
                id: item.id,
                status: item.status == 1 ? 2 : 1,
            });
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getSearchShopList();
            }
        },

        backPath() {
            this.$router.push({
                path: "/service/servicecenter/Index",
            });
        },

        // 复制
        clone(item) {
            this.cloneText =
                "https://" +
                window.location.host +
                "/service/serviceshopsdetail?id=" +
                item.id;

            this.$nextTick(() => {
                const range = document.createRange();
                range.selectNode(document.getElementById("copycode")); //获取复制内容的 id 选择器
                const selection = window.getSelection(); //创建 selection对象
                if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
                selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
                document.execCommand("copy"); //复制选中的文字到剪贴板
                selection.removeRange(range); // 移除选中的元素

                this.$message({
                    message: "复制成功",
                    type: "success",
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.spgl {
    background-color: #fff;
}
.title {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eaeaea;
    font-size: 18px;
    color: #333333;
    padding: 0 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content {
    padding: 26px 40px;
}
.tabs {
    display: flex;
    align-items: center;
    .tab {
        width: 110px;
        height: 40px;
        line-height: 40px;
        background: #f1f1f1;
        border-radius: 4px;
        font-size: 14px;
        color: #333333;
        text-align: center;
        margin-right: 23px;
        cursor: pointer;
    }
    .tab-avatat {
        background-color: #e5f2ff;
        color: #0073ee;
    }
}

.search {
    padding: 26px 0;
    .search-input {
        width: 256px;
        margin-right: 10px;
    }
    .search-submit {
    }
}

.table {
    border: 1px solid rgb(235, 238, 245);
    width: 100%;
    .table-logo {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        display: block;
        margin-right: 20px;
        padding-left: 30px;
    }
    .table-name {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
    }
    .drop {
        display: flex;
        align-items: center;
        justify-content: center;
        &::before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            background: #48bc46;
            border-radius: 6px;
            margin-right: 6px;
        }
    }

    .drop2 {
        display: flex;
        align-items: center;
        justify-content: center;
        &::before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            background: #dbdbdb;
            border-radius: 6px;
            margin-right: 6px;
        }
    }

    .money,
    .zxl {
        text-align: center;
    }

    .cz {
        div {
            text-align: center;
            font-size: 14px;
            color: #333333;
            line-height: 24px;
            cursor: pointer;
            &:hover {
                color: #1c87f3;
            }
        }
    }
}

::v-deep .el-table th.el-table__cell > .cell {
    text-align: center;
}

::v-deep .el-table th.el-table__cell {
    background-color: #eaeaea;
}

::v-deep .el-table .el-table__cell {
    padding: 20px 0;
}

.backPath {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    cursor: pointer;
    i {
        padding-left: 5px;
    }
    &:hover {
        opacity: 0.8;
    }
}
.scope-log-div {
    align-items: flex-start;
}
.pagination {
    text-align: center;
    padding-top: 30px;
}
.copycode {
    opacity: 0;
    height: 0;
}
</style>